<!doctype html>
<html style="width:100%;height:100%;margin:0;padding:0;">
<head>
    <title>ONLYOFFICE Documents</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8">
    
    <style type="text/css">.block_elem { position:absolute;padding:0;margin:0; }</style>

    <link rel="stylesheet" type="text/css" href="./vendor/tree.css">
    <script src="./vendor/tree.js"></script>
    <link rel="stylesheet" type="text/css" href="./vendor/trackbar.css">
    <script src="./vendor/trackbar.js"></script>

    <script src="./../src/engine/viewer.js"></script>

    <script src="./base.js"></script>
    <script src="./bookmarks.js"></script>

</head>
<body class="block_elem" style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;user-select:none;">
<div id="leftPanel" class="block_elem" style="position:absolute;left:0px;top:0px;width:200px;height:100%;background-color:#F1F1F1;">
    <button id="buttonBookmarks" class="block_elem" style="left:10px;top:10px;width:80px;height:30px;">Bookmarks</button>
    <button id="buttonThumbnails" class="block_elem" style="left:110px;top:10px;width:80px;height:30px;">Thumbnails</button>
    <div id="panelBookmarks" class="block_elem" style="background:#F1F1F1;position:absolute;left:0px;top:50px;bottom:0px;right:200px;z-index:1;overflow:scroll;">
        <div id="bookmarksTree"></div>
    </div>
    <div id="panelThumbnails" class="block_elem" style="background:#F1F1F1;position:absolute;left:0px;top:50px;bottom:0px;right:200px;z-index:2;">
        <div id="panelThimbnailsNatural" class="block_elem" style="left:0px;width:100%;top:0px;height:0px;">
        </div>
        <div id="zoomPanel" class="block_elem" style="left:0px;width:100%;top:0px;height:0px;">
            <div class="trackbar">
                <div class="track-percentage">0%</div>
                <div class="track-button"></div>
                <div class="track-line"></div>
                <!-- <div class="track-selector"></div> -->
            </div>
        </div>
    </div>
    <div id="splitter" class="block_elem" style="cursor:w-resize;position:absolute;left:0px;top:0px;width:10px;height:100%;background-color:#F1F1F1;border-left:1px solid #C8C8C8;border-right:1px solid #C8C8C8;box-sizing:border-box;"></div>
</div>
<div id="mainPanelHeader" class="block_elem" style="background-color:#F1F1F1;top:0px;height:50px;overflow:hidden;">
    <div id="headerPanel" class="block_elem" style="overflow:hidden;">
        <label for="zoomMode">Zoom mode:</label>
        <select id="zoomMode" name="zoomMode">
            <option value="zmWidth">Fit to width</option>
            <option value="zmPage">Fit to page</option>
            <option disabled>—————————</option>
            <option value="custom50">50%</option>
            <option value="custom75">75%</option>
            <option value="custom100">100%</option>
            <option value="custom110">110%</option>
            <option value="custom125">125%</option>
            <option value="custom150">150%</option>
            <option value="custom175">175%</option>
            <option value="custom200">200%</option>
        </select>
        <button id="buttonZoomIn" type="button">Zoom In</button>
        <button id="buttonZoomOut" type="button">Zoom Out</button>
        <label for="selectMode">Select mode:</label>
        <select id="selectMode" name="selectMode">
            <option value="smHand" selected>Hand</option>
            <option value="smText">Select</option>
        </select>
        <button id="buttonRotateLeft" type="button">Rotate Left</button>
        <button id="buttonRotateRight" type="button">Rotate Right</button>
    </div>
</div>
<div id="mainPanel" class="block_elem" style="top:50px;bottom:100%;overflow:hidden;"></div>
</body>
</html>